﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>原生js实现手风琴+图片轮播特效</title>
	</head>
	<body>
		<div style="width:980px; margin:50px auto;">
			<style type="text/css">
				#slider {
					position: absolute;
					width: 680px;
					height: 255px;
					overflow: hidden;
					background: #fff;
				}
				#slider .slide {
					position: absolute;
					top: 0px;
					width: 680px;
					height: 255px;
					background: #000;
					overflow: hidden;
					border-left: #000 solid 1px;
					cursor: default;
				}
				#slider .title {
					color: #F80;
					font-weight: bold;
					font-size: 1.2em;
					margin-right: 1.5em;
					text-decoration: none;
					font-size: 12px;
				}
				#slider .xxxxx {

					font-size: 12px;
					line-height: 18px;
				}

				#slider .backgroundText {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 100%;
					background: #000;
					filter: alpha(opacity=40);
					opacity: 0.4;
				}
				#slider .text {
					position: absolute;
					top: 1%;
					top: 100%;
					color: #FFF;
					font-family: verdana, arial, Helvetica, sans-serif;
					font-size: 0.9em;
					text-align: justify;
					width: 470px;
					left: 10px;
				}
				#slider .diapo {
					position: absolute;
					filter: alpha(opacity=100);
					opacity: 1;
					visibility: hidden;
				}
			</style>

			<script type="text/javascript">
				/* ==== slider nameSpace ==== */
				var slider = function() {
					/* ==== private methods ==== */
					function getElementsByClass(object, tag, className) {
						var o = object.getElementsByTagName(tag);
						for (var i = 0, n = o.length, ret = []; i < n; i++) {
							if (o[i].className == className)
								ret.push(o[i]);
						}
						if (ret.length == 1)
							ret = ret[0];
						return ret;
					}

					function setOpacity(obj, o) {
						if (obj.filters)
							obj.filters.alpha.opacity = Math.round(o);
						else
							obj.style.opacity = o / 100;
					}

					/* ==== Slider Constructor ==== */
					function Slider(oCont, speed, iW, iH, oP) {
						this.slides = [];
						this.over = false;
						this.S = this.S0 = speed;
						this.iW = iW;
						this.iH = iH;
						this.oP = oP;
						this.oc = document.getElementById(oCont);
						this.frm = getElementsByClass(this.oc, 'div', 'slide');
						this.NF = this.frm.length;
						this.resize();
						for (var i = 0; i < this.NF; i++) {
							this.slides[i] = new Slide(this, i);
						}
						this.oc.parent = this;
						this.view = this.slides[0];
						this.Z = this.mx;
						/* ==== on mouse out event ==== */
						this.oc.onmouseout = function() {
							this.parent.mouseout();
							return false;
						}
					}


					Slider.prototype = {
						/* ==== animation loop ==== */
						run : function() {
							this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
							this.view.calc();
							var i = this.NF;
							while (i--)
							this.slides[i].move();
						},
						/* ==== resize  ==== */
						resize : function() {
							this.wh = this.oc.clientWidth;
							this.ht = this.oc.clientHeight;
							this.wr = this.wh * this.iW;
							this.r = this.ht / this.wr;
							this.mx = this.wh / this.NF;
							this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
						},
						/* ==== rest  ==== */
						mouseout : function() {
							this.over = false;
							setOpacity(this.view.img, this.oP);
						}
					}
					/* ==== Slide Constructor ==== */
					Slide = function(parent, N) {
						this.parent = parent;
						this.N = N;
						this.x0 = this.x1 = N * parent.mx;
						this.v = 0;
						this.loaded = false;
						this.cpt = 0;
						this.start = new Date();
						this.obj = parent.frm[N];
						this.txt = getElementsByClass(this.obj, 'div', 'text');
						this.img = getElementsByClass(this.obj, 'img', 'diapo');
						this.bkg = document.createElement('div');
						this.bkg.className = 'backgroundText';
						this.obj.insertBefore(this.bkg, this.txt);
						if (N == 0)
							this.obj.style.borderLeft = 'none';
						this.obj.style.left = Math.floor(this.x0) + 'px';
						setOpacity(this.img, parent.oP);
						/* ==== mouse events ==== */
						this.obj.parent = this;
						this.obj.onmouseover = function() {
							this.parent.over();
							return false;
						}
					}
					Slide.prototype = {
						/* ==== target positions ==== */
						calc : function() {
							var that = this.parent;
							// left slides
							for (var i = 0; i <= this.N; i++) {
								that.slides[i].x1 = i * that.Z;
							}
							// right slides
							for (var i = this.N + 1; i < that.NF; i++) {
								that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
							}
						},
						/* ==== HTML animation : move slides ==== */
						move : function() {
							var that = this.parent;
							var s = (this.x1 - this.x0) / that.S;
							/* ==== lateral slide ==== */
							if (this.N && Math.abs(s) > .5) {
								this.obj.style.left = Math.floor(this.x0 += s) + 'px';
							}
							/* ==== vertical text ==== */
							var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
							if (Math.abs(v - this.v) > .5) {
								this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
								this.v = v;
								this.cpt++;
							} else {
								if (!this.pro) {
									/* ==== adjust speed ==== */
									this.pro = true;
									var tps = new Date() - this.start;
									if (this.cpt > 1) {
										that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
									}
								}
							}
							if (!this.loaded) {
								if (this.img.complete) {
									this.img.style.visibility = 'visible';
									this.loaded = true;
								}
							}
						},
						/* ==== light ==== */
						over : function() {
							this.parent.resize();
							this.parent.over = true;
							setOpacity(this.parent.view.img, this.parent.oP);
							this.parent.view = this;
							this.start = new Date();
							this.cpt = 0;
							this.pro = false;
							this.calc();
							setOpacity(this.img, 100);
						}
					}
					/* ==== public method - script initialization ==== */
					return {
						init : function() {
							// create instances of sliders here
							// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
							this.s1 = new Slider("slider", 12, 1.84 / 3, 1 / 3.2, 70);
							setInterval("slider.s1.run();", 16);
						}
					}
				}();

			</script>
			<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
			</head>

			<body>
				<div id="center">
					<div id="slider">
						<div class="slide">
							<a href="http://www.jq-school.com" target="_blank"><img class="diapo" src="胡歌.jpg" alt=""></a>
							<div class="text">
								<span class="title">网站设计</span>
								<span class="xxxxx">网站的产品创新、界面视觉引导、图型设计做体验分析，与程序员一起推动设计实现。将项目的构想形成视觉效果，如icon,边框，网页控件，窗口规范，整体布局等</span>
							</div>
						</div>
						<div class="slide">
							<a href="http://www.jq-school.com" target="_blank"><img class="diapo" src="hg2.jpg" alt=""></a>
							<div class="text">
								<span class="title">SEO搜索优化</span>
								<span class="xxxxx">Web前端开发团队为视觉设计师和系统工程师顺畅沟通架起桥梁。在确保前端代码组织有序下将结构与表现(Xhtml+CSS)相分离，提高代码可维护性和组件易用性</span>
							</div>
						</div>
						<div class="slide">
							<a href="http://www.jq-school.com" target="_blank"><img class="diapo" src="hg2.jpg" alt=""></a>
							<div class="text">
								<span class="title">软件界面</span>
								<span class="xxxxx">针对不同产品提供个性化的软件界面设计方案，服务涵盖为PC端、电视、车载系统等平台的界面设计</span>
							</div>
						</div>
						<div class="slide">
							<a href="http://www.jq-school.com" target="_blank"><img class="diapo" src="hg2.jpg" alt=""></a>
							<div class="text">
								<span class="title">移动应用开发</span>
								<span class="xxxxx">基于IOS(iPAD、iPhone)、Android系统平台的手机及平板电脑移动应用开发</span>

							</div>
						</div>

					</div>
				</div>

				<script type="text/javascript">
					/* ==== start script ==== */
					slider.init();
				</script>

		</div>

	</body>
</html>

